/*
 * @Author: zhangzhen
 * @Date: 2022-07-05 10:26:45
 * @LastEditors: zhangzhen
 * @LastEditTime: 2022-10-20 16:11:44
 * @Description:
 *
 *
 */

import { useState, useEffect } from 'react'
import { getNowTime, Today, getWeekDay } from './constant'
import styles from './index.module.scss'
import { shallowEqual } from 'react-redux'
import { useAppSelector } from '@/redux/hook'

const DateBox = () => {
  const configs = useAppSelector(({ state }) => ({ ...state.configs }), shallowEqual)
  const [dateObj, setDateObj] = useState(getNowTime())
  const [timeArr, setTimeArr] = useState<string[][]>([])
  useEffect(() => {
    const timeStr = dateObj.Hour + dateObj.Minute + dateObj.Second
    const arr = timeStr.split('').map((item, index) => {
      if (item === '0' && (index === 1 || index === 3 || index === 5)) {
        return [item, '9']
      } else if (item === '0' && (index === 0 || index === 2 || index === 4)) {
        return [item, '0']
      } else {
        return [item, String(Number(item) - 1)]
      }
    })
    setTimeArr(arr)
  }, [dateObj])

  setInterval(() => {
    setDateObj(getNowTime())
  }, 1000)

  return (
    <div className={styles.dateFlipBox}>
      {/* 小时 */}
      {/* 1 */}
      {timeArr.map((item, index) => {
        if (index === 1 || index === 3) {
          return (
            <span key={item[0] + index}>
              <div className={`${styles.flip} ${styles.down} ${styles.go} `}>
                <div
                  className={`${styles.digital} ${styles.front} ${styles[`number${item[1]}`]}`}
                  style={{ color: configs.timeColor }}
                ></div>
                <div
                  className={`${styles.digital} ${styles.back}  ${styles[`number${item[0]}`]}`}
                  style={{ color: configs.timeColor }}
                ></div>
              </div>
              <em>:</em>
            </span>
          )
        }
        return (
          <div key={item[1] + index} className={`${styles.flip} ${styles.down} ${styles.go}`}>
            <div
              className={`${styles.digital} ${styles.front}  ${styles[`number${item[1]}`]}`}
              style={{ color: configs.timeColor }}
            />
            <div
              className={`${styles.digital} ${styles.back} ${styles[`number${item[0]}`]}`}
              style={{ color: configs.timeColor }}
            />
          </div>
        )
      })}
      <div className={styles.dateStr} style={{ color: configs.dateColor, fontSize: configs.dateSize }}>
        <span>{Today}</span>
        <span>{getWeekDay()}</span>
      </div>
    </div>
  )
}

export default DateBox
